import { ProColumns, ProTable } from '@/components/Pro';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
interface Props {
  ProTableData: API.ChargePileDataDTO['dataList'];
}

export const Overview: React.FC<Props> = ({ ProTableData }) => {
  const [onlinState, setOnlieState] = useState([]);
  const [runState, setrunState] = useState([]);
  const intl = useIntl();

  useEffect(() => {
    (async () => {
      try {
        // 在线状态字典
        let OnlineState = await fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS);
        setOnlieState(OnlineState || []);
        console.log(onlinState);

        let runstates = (await fetchDictInfo(DATABASE_TYPE_ENUM.PCS_STATUS)) || [];
        setrunState(runstates || []);
      } catch (error) {
        console.error(error);
      }
    })();
  }, []);

  const columns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceName' }),
      dataIndex: 'name',
      valueType: 'text',
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceStatus' }),
      dataIndex: 'workState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
      },
      render: (_, record) => {
        let arr = runState.filter((res) => Number(res?.value) === Number(record?.workState));

        return arr[0]?.label || '--';
      },
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.realTimePower' })}`,
      dataIndex: 'inputPower',
      fieldProps: {
        mode: 'multiple',
        maxTagCount: 'responsive',
      },
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.dailyPower' })}`,
      dataIndex: 'dayPowerGen',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.totalPower' })}`,
      dataIndex: 'totalPowerConsumption',
      search: false,
    },
  ];
  console.log('我这里近段时间覅');

  return (
    <ProTable
      columns={columns}
      dataSource={ProTableData}
      rowKey="key"
      search={false}
      pagination={{
        showQuickJumper: true,
      }}
      dateFormatter="string"
      headerTitle={intl.formatMessage({ id: 'data.overviewOfChargingPile' })}
    />
  );
};
